import React from 'react';
import './Superway1.css';
import { Toast } from 'antd-mobile';
import Topbar from '../../components/Topbar/Topbar';
import SuperwaySay1 from '../../components/SuperwaySay/SuperwaySay';

class Superway1 extends React.Component {

	constructor(props) {
	  super(props);
	  this.state = {
        content:'',
        time:'',

        //获取本地中使用用户的id
        id:localStorage.getItem('userid'),
	  };
	}

    async componentDidMount() {
        //获取所有动态
        fetch(`https://www.prebeauty.work/superway1`,{
        method:'GET',
        headers:{
            'content-type': 'application/json'
        }
        }).then((res)=>{
            if(res.status===200){
                res.json().then( (data)=> {
                    this.setState({
                        dataList:data
                    })
                    console.log(this.state.dataList)
                })
            }else {
                alert("出现一个问题");
            }
        })
    }

	render() {
        return (
            <div className="superway1">
                <Topbar name="找学友" color="#99cccc"/>
                <div className="superway1-fabu"> 
                    <button  
                        style={{
                            width:'15%',
                            height:'30px',
                            borderRadius:'20px',
                            backgroundColor: '#99cccc',
                            position:'absolute',
                            right:'5%',
                            bottom:'20px'
                        }} 
                        onClick={async()=>{
                            const super1param = {
                                userid:this.state.id,
                                content:this.state.content,
                            }
                            await fetch('https://www.prebeauty.work/superway1', {
                                method: 'POST',
                                body: JSON.stringify(super1param),
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                            })
                            .then((res) => res.json() )
                            .then((res) => {
                                console.log(res);
                                Toast.success('成功发布',1);
                                //清空输入框
                                document.getElementById("superway1-fabu").value=""
                                //重新获取所有动态
                                fetch(`https://www.prebeauty.work/superway1`,{
                                    method:'GET',
                                    headers:{
                                        'content-type': 'application/json'
                                    }
                                    }).then((res)=>{
                                        if(res.status===200){
                                            res.json().then( (data)=> {
                                                this.setState({
                                                    dataList:data
                                                })
                                                console.log(this.state.dataList)
                                            })
                                        }else {
                                            alert("出现一个问题");
                                        }
                                    })
                            })
                        }}

                    >发布</button>
                    <textarea
                        id="superway1-fabu"
                        placeholder='发布信息，找到志同道合的"学友"...' 
                        style={{width:'80%',height:'90px',borderRadius:'20px',marginTop:'15px',marginLeft:'5%',padding:'6px 3%',position:'absolute',top:'8px'}}
                        onChange={(e)=>{
                            this.setState({
                                content:e.target.value 
                            })
                        }}
                    ></textarea>   
                </div>
                
                {
                    (!this.state.dataList) ? null : this.state.dataList.map((item,index)=>{
                        return (
                            <div key={index} >
                                <SuperwaySay1 userid={item.userid} time={item.time} content={item.content} />
                            </div>
                        ) 
                    })
                }
            </div>
        )
    }
}

export default Superway1